<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>用户综合管理 - 学生宿舍管理系统</title>
		<link rel="shortcut icon" href="../img/head.png" type="image/x-icon">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		
		<link rel="stylesheet" href="css/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="css/biaoge.css">
        <link rel="stylesheet" href="css/quyu.css">
        <script type="text/javascript" src="js/xadmin.js"></script>
        <script src="css/layui/layui.js" charset="utf-8"></script>
        <style>
            .box1 {
			    text-align: center;
			    width: 100%;
			    margin-top: 10px;
			}
			h3 {
			    text-align: center;
			    font-size: 25px;
			    color: aliceblue;
			    font-family: 华文楷体;
			}
        </style>
	</head>
	<body>

		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo" style="width: 300px;"><h3 >“东软”志愿者管理系统</h3></div>
				<!-- 头部区域（可配合layui 已有的水平导航） -->
				<div class="left_open">
					<a><i class="layui-icon">&#xe668;</i></a>
				</div>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="javascript:;">
							<img src="../img/13.jpg" class="layui-nav-img">
							院级管理员
						</a>
						<dl class="layui-nav-child">
							<dd><a href="">切换账号</a></dd>
							<dd><a href="../Login&Register.jsp">退出</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item"><a href="">前台首页</a></li>
				</ul>
			</div>

			<div class="layui-side layui-bg-black">
				<div class="layui-side-scroll">
                    <div class="box1">
                        <img src="../img/13.jpg" alt="">
                    </div>
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
                        
						<li class="layui-nav-item layui-nav-itemed"><a href="home.jsp"><i class="layui-icon">&#xe68e;</i>&nbsp;&nbsp;主页</a></li>
						<li class="layui-nav-item ">
							<a href="javascript:;"><i class="layui-icon">&#xe66f;</i>&nbsp;&nbsp;志愿者管理</a>
							<dl class="layui-nav-child">
								<dd><a href="/Volunteer/Volunteer">志愿者列表</a></dd>
								<dd><a href="detail.jsp">志愿者详情</a></dd>
                                <dd><a href="/Volunteer/Examine">志愿者审批</a></dd>
                                <dd><a href="/Volunteer/Blist">黑名单</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;"><i class="layui-icon">&#xe653;</i>&nbsp;&nbsp;活动管理</a>
							<dl class="layui-nav-child">
								<dd><a href="/Volunteer/News">新闻管理</a></dd>
								<dd><a href="/Volunteer/Notice">志愿活动</a></dd>
								
							</dl>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;"><i class="layui-icon">&#xe67a;</i>&nbsp;&nbsp;物资管理</a>
							<dl class="layui-nav-child">
								<dd><a href="3-1.html">物资管理</a></dd>
								<dd><a href="3-2.html">物资管理</a></dd>
								<dd><a href="3-3.html">物资管理</a></dd>
								<dd><a href="3-4.html">物资管理</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item"><a href="7-1.html"><i class="layui-icon">&#xe60b;</i>&nbsp;&nbsp;个人中心</a></li>
					</ul>
				</div>
			</div>

			<div class="layui-body" style="bottom: 0px;">
                <ol class="breadcrumb">
                    <li class="active"><a href="#">主页</a></li>
                </ol>
				<!-- 内容主体区域 -->
                <div style="margin: 20px;  background-color: #F6F6F6;">
                    <div style="padding: 10px;padding-top: 10px; padding-bottom: 5px;">

                        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin-top: 0px;">
                            <!-- <ul class="layui-tab-title">
                                <li class="layui-this">新增用户</li>
                                <li>删除用户</li>
                                <li>修改用户信息</li>
                            </ul> -->
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div class="layui-fluid">
                                        <div class="layui-row layui-col-space15">
                            
                                            <div class="layui-col-sm12 layui-col-md6">
                                                <div class="layui-card">
                                                    <div class="layui-card-header">最新一周新增志愿者</div>
                                                    <div class="layui-card-body" style="min-height: 280px;">
                                                        <div id="main1" class="layui-col-sm12" style="height: 300px;"></div>
                            
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="layui-col-sm12 layui-col-md6">
                                                <div class="layui-card">
                                                    <div class="layui-card-header">上半年活动“报名/完成”比率</div>
                                                    <div class="layui-card-body" style="min-height: 280px;">
                                                        <div id="main2" class="layui-col-sm12" style="height: 300px;"></div>
                            
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="layui-col-sm12 layui-col-md6">
                                                <div class="layui-card">
                                                    <div class="layui-card-header">志愿者来源</div>
                                                    <div class="layui-card-body" style="min-height: 280px;">
                                                        <div id="main3" class="layui-col-sm12" style="height: 300px;"></div>
                            
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="layui-col-sm12 layui-col-md6">
                                                <div class="layui-card">
                                                    <div class="layui-card-header">物资使用量</div>
                                                    <div class="layui-card-body" style="min-height: 280px;">
                                                        <div id="main4" class="layui-col-sm12" style="height: 300px;"></div>
                            
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                    
                                 

                                    
                                </div>
    
                            </div>
                            
                        </div>
    
                    </div>
                </div>

			</div>


		</div>



        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
        <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));

        // 指定图表的配置项和数据
        var option = {
            grid: {
                top: '5%',
                right: '1%',
                left: '1%',
                bottom: '10%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name:'用户量',
                data: [82, 93, 90, 93, 129, 133, 132],
                type: 'line',
                smooth: true
            }]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main2'));

        // 指定图表的配置项和数据
        var option = {
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                top: '5%',
                right: '2%',
                left: '1%',
                bottom: '10%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : ['一月','二月','三月','四月','五月','月六','七月']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'完成',
                    type:'line',
                    areaStyle: {normal: {}},
                    data:[45, 132, 101, 134, 90, 230, 210],
                    smooth: true
                },
                {
                    name:'报名',
                    type:'line',
                    areaStyle: {normal: {}},
                    data:[120, 182, 191, 234, 290, 330, 310],
                    smooth: true,

                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main3'));

        // 指定图表的配置项和数据
        var option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'学院招募'},
                        {value:310, name:'邮件报名'},
                        {value:234, name:'媒体广告'},
                        {value:135, name:'学校公众号'},
                        {value:1548, name:'平台注册'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };



        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

         // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main4'));

        // 指定图表的配置项和数据
        var option = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: '硬盘使用量',
                    type: 'gauge',
                    detail: {formatter:'{value}%'},
                    data: [{value: 88, name: '已使用'}]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
        </script>



        <!-- ******************************************************************************* -->
		<script>
			//JavaScript 代码区域
			layui.use('element', function() {
				var element = layui.element;

			});
		</script>
		<script>
			var _hmt = _hmt || [];
			(function() {
				var hm = document.createElement("script");
				hm.src = "https://hm.baidu.com/hm.js?d214947968792b839fd669a4decaaffc";
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(hm, s);
			})();

            layui.use(['laydate','form'], function(){
            });
		</script>
            
	</body>
</html>




